<template>
	<view class="filter">
		<button size="mini" type="primary" style="font-size: 24rpx; border-radius: 24rpx" @click="showDrawer('showRight')">筛选</button>

		<uni-popup ref="inputDialog" type="dialog">
			<view class="popup">
				<view class="popup-top">
					<view class="popup-title">
						<span style="color: #3a97ec" @click="handlerResetFields">重置</span>
						<span>查询条件</span>
						<span style="color: #3a97ec" @click="handlerSubmit">确定</span>
					</view>
				</view>
				<view class="popup-form">
					<TCForm
						:columns="formColumns"
						:formData="formData"
						@submitForm="submitForm"
						ref="tcform"
						style="width: 100%"
						:labelWidth="labelWidth"
						:disabled="false"
						:showButton="false"
					></TCForm>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'headerScreening',
	components: {},
	props: {
		columns: {
			default: () => [],
			type: Array
		},
		hideBorder: {
			default: false,
			type: Boolean
		},
		showButton: {
			default: true,
			type: Boolean
		},
		disabled: {
			default: false,
			type: Boolean
		},
		formColumns: {
			default: () => [],
			type: Array
		},
		labelWidth: {
			default: '120rpx',
			type: String
		}
	},
	data() {
		return {
			rules: {},
			formData: {}
		};
	},
	created() {},
	methods: {
		handlerResetFields() {
			console.log('this.formData', this.formData);
			for (const prop in this.formData) {
				if (this.formData[prop]) {
					this.formData[prop] = null;
				}
			}
		},
		handlerSubmit() {
			this.$refs.tcform.submitForm();
		},
		submitForm(forVal) {
			this.$emit('headerScreeningSubmit', forVal);
			this.closeDrawer();
		},
		// 打开窗口
		showDrawer() {
			this.$refs['inputDialog'].open();
		},
		// 关闭窗口
		closeDrawer() {
			this.$refs['inputDialog'].close();
		}
	}
};
</script>

<style lang="scss" scoped>
.filter {
	display: flex;
	align-items: center;
}
.popup {
	position: relative;
	width: 500rpx;
	height: 700rpx;
	// background-color: var(--bg-color);
	background-color: #fff;
	border-radius: 8rpx;
	overflow: scroll;

	.popup-top {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 4;
		width: 100%;
		height: 60rpx;
		.popup-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100%;
			// background-color: var(--bg-color);
			background-color: #fff;
			padding: 0 20rpx;
		}
	}

	.popup-form {
		padding: 0 20rpx;
		padding-top: 24rpx;
	}
}
</style>
